クリックでボタンの色と文字を変更する
今回は、マウスのクリックによりボタンの色と文字を変更する方法を紹介します。このテクニックを利用すると、通常のボタンをラジオボタンのように活用することも可能となります。ホームページ講座のサンプルには『Yes / Noで解答するクイズ』も紹介しているので、あわせて参照してください。 サンプルページ

→ ボタンの色と文字を変更するには･･･？
 
ボタンをクリックした際に色や文字を変更するには、onClickイベントでJavaScriptを実行します。そして、以下のようにJavaScriptを記述します。なお、いずれの場合も文字や色指定を「'」（シングルクォーテーション）で挟むのを忘れないようにして下さい。
■ボタンに表示する文字を変更する場合
（ボタンのオブジェクト）.value='表示する文字';

■ボタンの背景色を変更する場合
（ボタンのオブジェクト）.style.background='(色指定)';

■ボタンの文字色を変更する場合
（ボタンのオブジェクト）.style.color='(色指定)';		  


→ クイズのHTMLを記述する
 
それでは、もっと具体的な例でこのテクニックの活用例を紹介していきましょう。今回は、『Yes / Noで解答するクイズ』を作成します。まずは、HTML部分の解説です。Yes / Noを選択するボタンは、初めに「No」を表示し、Style属性でその背景色を白（#FFFFFF）に指定しておきます。また、ボタンがクリックされた際にJavaScript関数「yesno()」が実行されるようにonClickイベントも追加しておきます。同様に、「解答をチェック」ボタンがクリックされた際は、JavaScript関数「bcheck()」を実行させます。
<FORM name="f1">
<H2>県庁所在地のテスト</H2>
【Q1】<BR>
　群馬県の県庁所在地は「高崎市」です。
　<INPUT type="button" value="No" style="background:#FFFFFF"
onClick="yesno(0)">
<BR><BR>
【Q2】<BR>
　和歌山県の県庁所在地は「和歌山市」です。
　<INPUT type="button" value="No" style="background:#FFFFFF"
onClick="yesno(1)">
<BR><BR>
【Q3】<BR>
　栃木県の県庁所在地は「宇都宮市」です。
　<INPUT type="button" value="No" style="background:#FFFFFF"
onClick="yesno(2)">
<BR><BR>
　<INPUT type="button" value="解答をチェック" onClick="bcheck()">
</FORM>		  


→ JavaScriptを記述する
 
次は、JavaScript部分の記述です。初めに、各ボタンのYes / Noを識別する配列「f」を宣言します。この配列は、値が「0」のときが「No」、値が「1」のときが「Yes」を示します。

関数「yesno()」では、配列「f」の値によりボタンの表示を変化させます。 配列「f」が「0」であった場合（「No」の場合）は、表示する文字を「Yes」に変更し、背景色を「赤」、文字色 を「白」に変更します。さらに、配列「f」の値を「1」に変更します。配列「f」が「1」であった場合（「Yes」の場合）は、これと逆の処理を行います。なお、いずれの処理も変更するボタンの添字は、引数「b」を利用して指定できます。

関数「bcheck()」は、答え合わせを行う関数です。今回の例では、【Q1】が「No」、【Q2】と 【Q3】が「Yes」の場合に全問正解となります。よって、分岐の条件は、f[0]==0 かつ f[1] ==1 かつ f[2]==1　となります。
<SCRIPT language="JavaScript">
<!--
var f=new Array(3);
f[0]=0;
f[1]=0;
f[2]=0;

function yesno(b){
if (f[b]==0){
document.f1.elements[b].value='Yes';
document.f1.elements[b].style.background='#FF0000';
document.f1.elements[b].style.color='#FFFFFF';
f[b]=1;
} else {
document.f1.elements[b].value='No';
document.f1.elements[b].style.background='#FFFFFF';
document.f1.elements[b].style.color='#000000';
f[b]=0;
}
}

function bcheck(){
if (f[0]==0 && f[1]==1 && f[2]==1){
alert('全問正解です');
} else {
alert('間違いがありますよ！');
}
}

// -->
</SCRIPT> 		サンプルページ


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��